import CommonModal from '@/components/CommonModal';
import SubTitle from '@/views/components/SubTitle';
import { useEffect, useState, useRef } from 'react';
import { Input, message } from 'antd';

/** 同意仅退款 */
function AgreeOnlyRefund(props) {
	const { childAccount, handleOk, handleCancel } = props;
	const [isOk, setIsOk] = useState(false);
	const [open, setOpen] = useState(false);
	const inputRef = useRef(null);

	useEffect(() => {
		setOpen(true);
	}, [])

	const onOk = () => {
		const val = inputRef.current.input.value;
		if (!val) {
			message.info('请输入验证码')
			return;
		}
		setIsOk(true);
		setOpen(false);
	}

	const onCancel = () => {
		setOpen(false);
	}

	const afterClose = () => {
		if (isOk) {
			const val = inputRef.current.input.value;
			handleOk(val)
		} else {
			handleCancel();
		}
	}

	return (
		<CommonModal title="淘宝验证码" afterClose={afterClose} open={open} width="552px" onOk={onOk} onCancel={onCancel}>
			<SubTitle wrapStyle={{ marginBottom: '20px' }} symbol as="s2" title="淘宝退款需要验证码验证" />
			<div style={{ marginBottom: '16px' }}>短信已发送至<span style={{ color: '#0068FF'}}>【{childAccount}】</span>子账号的手机上</div>
			<Input ref={inputRef} placeholder="请输入验证码" />
		</CommonModal>
	);
}

export default AgreeOnlyRefund;